<!--基桩工程检测管理--按工程项目统计 -->
<template>
  <div class="department">
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 部门信息 -->
      <div class="department_right_name">
        <div>基桩检测统计</div>
      </div>
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left">
          <div class="selectBox">
            <span class="nameBox">项目名称：</span>
            <el-select
              @change="function (v) {
                  return selectCompany(v);
                }
              "
              v-model="companyName"
              placeholder="请选择项目"
            >
              <el-option
                v-for="v in companyList"
                :key="v.F_ProjectName"
                :label="v.F_ProjectName"
                :value="v"
              >
              </el-option>
            </el-select>
          </div>
          <div class="selectBox">
            <span class="nameBox">施工单位：</span>
            <el-select
              @change="function (v) {
                  return selectProject(v);
                }
              "
              v-model="projectName"
              placeholder="选择参建单位"
            >
              <el-option
                v-for="v in projectList"
                :key="v.F_CompanyName"
                :label="v.F_CompanyName"
                :value="v"
              >
              </el-option>
            </el-select>
          </div>
          <div class="selectBox">
            <span class="nameBox">检测状态：</span>
            <el-select
              @change="function (v) {
                  return selectJudgetype(v);
                }
              "
              v-model="getList.keyWord"
              placeholder="选择检测状态"
            >
              <el-option
                v-for="v in Checktype"
                :key="v.fItemName"
                :label="v.fItemName"
                :value="v"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="print">
          <div class="printTable">
            <!--  -->
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="small"
              @click="getDataList(getList)"
            >
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <el-table
          ref="multipleTableA"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          :data="tableData"
          style="width: 100%"
          height="100%"
          stripe
          border
          highlight-current-row
          @current-change="rowChange"
        >
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="F_Status"
            label="检测状态"
            align="center"
            width="80"
          >
            <!-- 超出鼠标滑过显示 -->
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_Status">{{
                  scope.row.F_Status
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="F_ProjectName" label="项目名称">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_ProjectName">{{
                  scope.row.F_ProjectName
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="F_CompanyName" label="施工单位">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_CompanyName">{{
                  scope.row.F_CompanyName
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="F_EngineeringName" label="工程名称">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_EngineeringName">{{
                  scope.row.F_EngineeringName
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fCheckcompanyname" label="工程地点">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a
                  href="javascript:;"
                  :title="scope.row.F_EngineeringLocation"
                  >{{ scope.row.F_EngineeringLocation }}</a
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="F_PierCount"
            label="墩台个数"
            width="69"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_PierCount">{{
                  scope.row.F_PierCount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="F_FoundationCount"
            align="center"
            label="基桩数量"
            width="69"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.F_FoundationCount">{{
                  scope.row.F_FoundationCount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="checkedCount"
            align="center"
            label="已检基桩"
            width="69"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.checkedCount">{{
                  scope.row.checkedCount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="rate"
            label="完成率%"
            width="69"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.rate">{{
                  scope.row.rate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="FirstClasscount"
            label="I类"
            width="60"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.FirstClasscount">{{
                  scope.row.FirstClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="firstRate"
            label="I类占比"
            width="70"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.firstRate">{{
                  scope.row.firstRate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="SecondClasscount"
            label="II类"
            width="60"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.SecondClasscount">{{
                  scope.row.SecondClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="secondRate"
            label="II类占比"
            width="70"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.secondRate">{{
                  scope.row.secondRate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="ThirdClasscount"
            label="III类"
            width="60"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.ThirdClasscount">{{
                  scope.row.ThirdClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="thirdRate"
            label="III类占比"
            width="70"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.thirdRate">{{
                  scope.row.thirdRate
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="FourthClasscount"
            label="IV类"
            width="60"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.FourthClasscount">{{
                  scope.row.FourthClasscount
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fourthRate"
            label="IV类占比"
            width="70"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fourthRate">{{
                  scope.row.fourthRate
                }}</a>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="CheckStartDates"
            label="检测开始时间"
            width="95"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.CheckStartDates">{{
                  scope.row.CheckStartDates
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="CheckEndingDates"
            label="检测结束时间"
            width="95"
            align="center"
          >
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.CheckEndingDates">{{
                  scope.row.CheckEndingDates
                }}</a>
              </div>
            </template>
          </el-table-column>
          <template slot="empty">
            <img
              style="width: 285px; height: 208px"
              src="@/assets/img/undata.png"
              alt=""
            />
            <div class="pageFlagText">暂时没有数据哦！</div>
          </template>
        </el-table>
        <div class="block" v-if="navigatepageNums > 1">
          <!--  -->
          <div class="paginationInfo">
            检索到{{ queryCriteriaData.total }} 条记录 | 显示第
            <span v-if="getList.page == 1">{{ getList.page }}</span
            ><span v-else>{{ 20 * (getList.page - 1) }}</span>
            <!-- - {{ 20 * getList.page }} 条记录 -->
            -
            <span v-if="queryCriteriaData.pages == queryCriteriaData.lastPage">
              {{ queryCriteriaData.total }}</span
            >
            <span v-else> {{ 20 * getList.page }} </span>
            条记录
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="getList.page"
            :page-size="getList.pageSize"
            layout="prev, pager, next, jumper"
            :total="queryCriteriaData.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getInfoByProject,
  // 基桩检测统计获取项目名称
  getProjectIdAndName,
  // 基桩检测统计获取施工单位名称
  getCompanyIdAndName,
} from "@/api/request.js";
export default {
  name: "Home",
  data() {
    return {
      names: "project",
      lr_look: null,
      projectList: [],
      Checktype: [
        {
          fItemName: "==请选择==",
          fItemValue: "==请选择==",
        },
        {
          fItemName: "未开始",
          fItemValue: "未开始",
        },
        {
          fItemName: "检测中",
          fItemValue: "检测中",
        },
        {
          fItemName: "已结束",
          fItemValue: "已结束",
        },
      ], //检测状态：- 根据当前登录用户获取检测类型
      companyList: [], //检测状态：
      companyName: null,
      projectName: null,
      // 列表
      getList: {
        fDepartmentid: "", // 项目id
        fCompanyid: "", // 施工单位id
        keyWord: "", // 检测状态
        modelType: "2", // 0-按建设项目   1-按施工单位   2-按工程项目
        page: 1,
        pageSize: 20,
        fUserid: "",
        companyid: "",
      },
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      formData: {},
      loading: false,
      tableData: [],
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.getList.fUserid = this.userInfo.userId;
    this.getList.companyid = this.userInfo.companyId;
    this.getDataList(this.getList);
    this.btnRole(this.names);
    this.getProjectIdAndName();
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });

        this.lr_look = btnStr.includes("lr_look");
      } else {
        this.lr_look = true;
      }
    },

    // 页面切换
    handleSizeChange(val) {
      return val;
    },
    handleCurrentChange(val) {
      this.getList.page = val;
      this.getDataList(this.getList);
    },
    selectJudgetype(e) {
     if (e.fItemName == "==请选择==") {
        this.getList.keyWord = '';
      } else {
        this.getList.keyWord = e.fItemName;
      }
      this.getDataList(this.getList);
    },
    selectCompany(e) {
      this.companyName = e.F_ProjectName;
      this.getList.fDepartmentid = e.F_ProjectId;
      this.projectName = "";
      this.getList.fCompanyid = "";
      this.getCompanyIdAndName(e.F_ProjectId);

      this.getDataList(this.getList);
    },
    selectProject(e) {
      this.projectName = e.F_CompanyName;
      this.getList.fCompanyid = e.F_CompanyId;
      this.getDataList(this.getList);
    },
    getProjectIdAndName() {
      getProjectIdAndName({})
        .then((res) => {
          if (res.errcode == 0) {
            var arr = [
              {
                F_ProjectId: "",
                F_ProjectName: "请选择",
              },
            ];
            this.companyList = arr.concat(res.data.projectList);
          } else {
            this.$message.error("项目名称", res.msg);
            return false;
          }
        })
        .catch(() => {
          console.log("项目名称获取失败");
          return false;
        });
    },
    getCompanyIdAndName(id) {
      getCompanyIdAndName({ projectId: id })
        .then((res) => {
          if (res.errcode == 0) {
            var arr = [
              {
                F_CompanyId: "",
                F_CompanyName: "请选择",
              },
            ];
            this.projectList = arr.concat(res.data.companyList);
          } else {
            this.$message.error("施工单位", res.msg);
            return false;
          }
        })
        .catch(() => {
          console.log("施工单位获取失败");
          return false;
        });
    },

    //查看下级
    see() {
      if (this.checked == true) {
        this.getList.sublevel = 1;
      } else {
        this.getList.sublevel = 0;
      }
      this.getDataList(this.getList);
    },
    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },
    getDetail() {
      if (this.equipmentDetailId != null && this.equipmentDetailId != "") {
        this.edit(1);
      } else {
        return this.$message.error("请先选择需要编辑的数据");
      }
    },

    // 获取列表数据
    getDataList(data) {
      this.loading = true;
      var that = this;
      getInfoByProject(data)
        .then((res) => {
          if (res.errcode == 0) {
            that.loading = false;
            that.tableData = res.data.pageInfo.list;
            this.queryCriteriaData = res.data.pageInfo;
            this.navigatepageNums =
              this.queryCriteriaData.navigatepageNums.length;
          } else {
            this.loading = false;
            this.$message.error("列表数据", res.msg);
          }
        })
        .catch((err) => {
          console.log("列表接口", err);
        });
    },
  },
};
</script>
<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

a {
  text-decoration: none;
  color: #000;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.mechanism_nav_left {
  display: flex;
  align-items: center;
  width: 60%;
}

.mechanism_nav_left .selectBox {
  display: flex;
  align-items: center;
  /* width: 3.5rem; */
}

.mechanism_nav_left .selectBox .nameBox {
  width: 85px;
  font-size: 0.12rem;
}

.leftBox {
  width: 51%;
  box-sizing: border-box;
}

.rightBox {
  width: 49%;
  box-sizing: border-box;
}

.modelBox {
  display: flex;

  height: 40px;
  align-items: center;

  /* line-height: 40px;
    height: 25px; */
}

.modelBoxChild {
  width: 100%;
  border: 1px solid #d1d7e2;
  color: #676d77;
  background-color: #f5f7fa;
  height: 25px;
  border-radius: 4px;
  padding: 0 15px;
  line-height: 25px;
  /* box-sizing: border-box; */
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}
</style>